<template>
	<div>
		<el-form :inline="true" :model="searchKeyWords" class="demo-form-inline">
			<el-form-item label="日期范围：">
				<el-date-picker
						v-model="searchKeyWords.data"
						type="daterange"
						format="yyyy 年 MM 月 dd 日"
						value-format="yyyy-MM-dd"
						range-separator="至"
						start-placeholder="开始日期"
						end-placeholder="结束日期">
				</el-date-picker>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="onSubmit">查询</el-button>
			</el-form-item>
		</el-form>
		<el-row>
			<el-col :span="8"><div id="main1"></div></el-col>
			<el-col :span="8"><div id="main2"></div></el-col>
			<el-col :span="8"><div id="main3"></div></el-col>
		</el-row>
		<el-row>
			<el-col :span="8"><div id="main4"></div></el-col>
			<el-col :span="8"><div id="main5"></div></el-col>
			<el-col :span="8"><div id="main6"></div></el-col>
		</el-row>
	</div>
</template>
<script>
	export default {
		data(){
			return{
				searchKeyWords:{
					data:''
				}
			}
		},
		mounted(){
				this.drawPie()
		},
		methods: {
			onSubmit(){

			} ,
			drawPie() {
				let myChart1 = this.$echarts.init(document.getElementById('main1'))
				let myChart2 = this.$echarts.init(document.getElementById('main2'))
				let myChart3 = this.$echarts.init(document.getElementById('main3'))
				let myChart4 = this.$echarts.init(document.getElementById('main4'))
				let myChart5 = this.$echarts.init(document.getElementById('main5'))
				let myChart6 = this.$echarts.init(document.getElementById('main6'))
				myChart1.setOption({
					title: {
						text: '翻桌',
						subtext: '前三名',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						left: 'center',
						top: 'bottom',
						data: ['1号桌', '3号桌', '2号桌']
					},
					
					series: [
						{
							name: '翻桌排行榜',
							type: 'pie',
							radius: [10, 70],
							center: ['50%', '50%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							data: [
								{value: 10, name: '1号桌'},
								{value: 5, name: '3号桌'},
								{value: 15, name: '2号桌'},
							]
						},
					]
				})
				myChart2.setOption({
					title: {
						text: '菜品',
						subtext: '前三名',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						left: 'center',
						top: 'bottom',
						data: ['白菜', '回锅肉', '麻婆豆腐']
					},

					series: [
						{
							name: '菜品排行榜',
							type: 'pie',
							radius: [10, 70],
							center: ['50%', '50%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							data: [
								{value: 10, name: '白菜'},
								{value: 25, name: '回锅肉'},
								{value: 5, name: '麻婆豆腐'},
							]
						},
					]
				})
				myChart3.setOption({
					title: {
						text: '酒水',
						subtext: '前三名',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						left: 'center',
						top: 'bottom',
						data: ['茅台', '五粮液', '郎酒']
					},

					series: [
						{
							name: '酒水排行榜',
							type: 'pie',
							radius: [10, 70],
							center: ['50%', '50%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							data: [
								{value: 50, name: '茅台'},
								{value: 15, name: '五粮液'},
								{value: 40, name: '郎酒'},
							]
						},
					]
				})
				myChart4.setOption({
					title: {
						text: '消耗品',
						subtext: '前三名',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						left: 'center',
						top: 'bottom',
						data: ['纸巾', '打包盒', '吸管']
					},

					series: [
						{
							name: '消耗品排行榜',
							type: 'pie',
							radius: [10, 70],
							center: ['50%', '50%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							data: [
								{value: 10, name: '纸巾'},
								{value: 5, name: '打包盒'},
								{value: 15, name: '吸管'},
							]
						},
					]
				})
				myChart5.setOption({
					title: {
						text: '消费者年龄段',
						subtext: '分布图',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						left: 'center',
						top: 'bottom',
						data: ['20-25', '25-30', '30-35']
					},

					series: [
						{
							name: '消费者年龄段排行榜',
							type: 'pie',
							radius: [10, 70],
							center: ['50%', '50%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							data: [
								{value: 10, name: '20-25'},
								{value: 30, name: '25-30'},
								{value: 5, name: '30-35'},
							]
						},
					]
				})
				myChart6.setOption({
					title: {
						text: '消费者性别',
						subtext: '占比图',
						left: 'center'
					},
					tooltip: {
						trigger: 'item',
						formatter: '{a} <br/>{b} : {c} ({d}%)'
					},
					legend: {
						left: 'center',
						top: 'bottom',
						data: ['男', '女']
					},

					series: [
						{
							name: '性别占比图',
							type: 'pie',
							radius: [10, 70],
							center: ['50%', '50%'],
							roseType: 'radius',
							label: {
								show: false
							},
							emphasis: {
								label: {
									show: true
								}
							},
							data: [
								{value: 10, name: '男'},
								{value: 5, name: '女'},
							]
						},
					]
				})
			},
		} ,
		watch:{
		},

	}
</script>
<style scoped>
	  #main1,#main2,#main3,#main4,#main5,#main6{
		  width: 400px;
		  height: 240px;
		  margin: auto;
	  }
</style>